<template>
	<view class="pices" style="background-color: #FFFFFF;">
		<u-navbar back-text="返回" title="正文内容" :background="background" title-color="#ffffff" back-icon-color="#ffffff"
		 :back-text-style="{color: '#fff'}"></u-navbar>
		<scroll-view>
			<view class="content">
				<u-row>
					<u-col span="12">
						<u-row style="margin-top: 30rpx;">
							<u-col span="12">
								<!-- 楼主信息 -->
								<u-row>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="2">
										<u-avatar :src="disscu.createdHead"></u-avatar>
									</u-col>
									<u-col span="7">
										<view style="font-size: 35rpx;font-weight: 700">{{disscu.createdBy}}</view>
										<view style="font-size: 23rpx; color: #808080;">创建于：{{disscu.createDate|datafmt}}</view>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>
								<!-- 标题 -->
								<u-row>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="10" class="u-line-1">
										<text style="font-weight: 700;font-size: 37rpx;">{{disscu.title}}</text>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>
								<!-- 内容摘要 -->
								<u-row>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="10">
										<text>{{disscu.content}}</text>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>

								<u-row>
									<u-col span="1">
										<text style="color: #FFFFFF;">1</text>
									</u-col>
									<u-col span="10">
										<image style="height: 250rpx;" @click="preimg(imgs)" v-if="disscu.img==null?false:true" mode="aspectFit" :src="imgs">
										</image>
									</u-col>

									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>
								
								<!-- 点赞评论信息等 -->
										<u-divider border-color="#999999" :use-slot="false" :half-width="300" height="30"></u-divider>
										<u-row>
											<u-col span="4" style="text-align: center;">
												<span @click="showshare(disscu.id)" >
													<u-icon name="share"></u-icon><text>{{disscu.forward}}</text>
												</span>
											</u-col>
											<u-col span="4" style="text-align: center;">
												<span >
													<u-icon name="chat"></u-icon><text>{{disscu.comments}}</text>
												</span>
											</u-col>
											<u-col span="4" style="text-align: center;">
												<span @click="showToast(disscu.id)">
													<u-icon :name="disscu.likes|likefmt(disscu.id,ulike)" :style="disscu.likes|colorfmt(disscu.id,ulike)" id="likeicon"></u-icon><text >{{disscu.likes}}</text>
												</span>
											</u-col >
										</u-row >
										<u-divider border-color="#f4f4f5" :use-slot="false" :half-width="750" height="20" bg-color="#f4f4f5">
										</u-divider>
									</u-col>
								</u-row>
								
								<u-row>
									<u-divider border-color="#f4f4f5" :use-slot="false" :half-width="800" height="10" bg-color="#f4f4f5">
									</u-divider>
								</u-row>
								
								<!-- 评论列表 -->
								<u-row v-for="(item,index) in disscu.commentList" :key="index">
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="10">
										<u-row>

											<u-col span="2">
												<u-avatar v-if="item.img==''?false:true" :src="item.img"></u-avatar>
											</u-col>
											<u-col span="7">
												<view style="font-size: 35rpx;font-weight: 700">{{item.createdBy}}</view>
												<view style="font-size: 23rpx; color: #808080;">创建于：{{item.createDate|datafmt}}</view>
											</u-col>
											<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
										</u-row>
										<u-row>
											<u-col span="12">
												<text>{{item.content}}</text>
												<u-divider border-color="#999999" :use-slot="false" :half-width="300" height="30"></u-divider>
												
												<u-row>
													<u-col span="6" style="text-align: center;">
														<span @click="showcomment(item.id)">
															<u-icon name="chat"></u-icon><text>{{item.commentCount}}</text>
														</span>
													</u-col>
													<u-col span="6" style="text-align: center;">
														<!-- 评论的点赞 -->
														<span @click="commentlike(item.id)">
															<u-icon :name="item.likes|likecommfmt(item.id,ulike)" :style="item.likes|colorcommfmt(item.id,ulike)"></u-icon><text>{{item.likes}}</text>
														</span>
													</u-col>
												</u-row>
												
											</u-col>
										</u-row>
										<u-divider border-color="#f4f4f5" :use-slot="false" :half-width="800" height="10" bg-color="#f4f4f5">
										</u-divider>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>
								

								
								<u-divider color="#6d6d6d" half-width="200" border-color="#6d6d6d" height="80"
								style="margin-bottom: 100rpx;">我是有底线的</u-divider>
							</u-col>
						</u-row>
								<u-row>
									<u-col>
										<!-- 只能有一个根元素 -->
										<view class="sticky" style="position:fixed;bottom:0;background-color: #19BE6B;">
											<u-row>
												<u-col span="1"><text style="color: #19be6b;">1</text></u-col>
												<u-col span="8"><u-input class="uni-input" maxlength="1000" v-model="replytext" :value="replytext" name="input" placeholder="  回复楼主" style="background-color: #FFFFFF;border-radius: 30rpx;color: #000000;"/></u-col>
												<u-col span="2"><u-button type="success" @click="replydis" :plain="true" size="mini">发送</u-button></u-col>
												<u-col span="1"><text style="color: #19be6b;">1</text></u-col>
											</u-row>
										</view>
									</u-col>
								</u-row>

					</u-col>
				</u-row>

			</view>

		</scroll-view>
		
		<!-- 转发弹出层 -->
		<view>
			<u-popup v-model="showf" mode="bottom" length="40%">
				<u-row>
					<u-col span="12">
						<u-row>
							<u-col span="2"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="8"><u-divider color="#6d6d6d" half-width="200" border-color="#6d6d6d" height="80"
								style="margin-bottom: 100rpx;">分享给你的好友吧</u-divider></u-col>
							<u-col span="2"></u-col>
						</u-row>
						<u-row>
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="2"><u-icon name="weixin-circle-fill" size="100"color="#18b566" @click="weixinshare"></u-icon></u-col>
							<u-col span="2"><u-icon name="moments" size="90" color="#18b566"></u-icon></u-col>
							<u-col span="2"><u-icon name="weibo" size="100" color="#fab6b6"></u-icon></u-col>
							<u-col span="2"><u-icon name="qq-fill" size="100" color="#2979ff"></u-icon></u-col>
							<u-col span="2"><u-icon name="share-fill" size="100" color="#fcbd71" @click="linkshare"></u-icon></u-col>
							<u-col span="1"></u-col>
						</u-row>
						<u-row>
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="2" class="centertext">微信</u-icon></u-col>
							<u-col span="2" class="centertext">朋友圈</u-icon></u-col>
							<u-col span="2" class="centertext">微博</u-icon></u-col>
							<u-col span="2" class="centertext">QQ好友</u-icon></u-col>
							<u-col span="2" class="centertext">链接</u-icon></u-col>
							<u-col span="1"></u-col>
						</u-row>
					</u-col>
				</u-row>
			</u-popup>
		</view>
		
				<!-- 点赞弹出层 -->
				<view>
					<u-toast ref="uToast" />
				</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				comments: [],
				disscu: "",
				ulike:[],
				showl: false,
				disId:"",
				replytext:"",
				showf: false,
				imgs:""
			}
		},
		filters: {
			datafmt(arg1) {
				var a = arg1 + "";
				return a.substring(5, 10);
			},
			likefmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].discussionId==arg2){
						console.log(arg3[i].discussionId,arg2);
						return "thumb-up-fill"
					}
				}
				return "thumb-up"
			},
			colorfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].discussionId==arg2){
						console.log(arg3[i].discussionId,arg2);
						return 'color: #18B566;'
					}
				}
				return ""
			},
			likecommfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].commentId==arg2){
						console.log(arg3[i].commentId,arg2);
						return "thumb-up-fill"
					}
				}
				return "thumb-up"
			},
			colorcommfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].commentId==arg2){
						console.log(arg3[i].commentId,arg2,"判断颜色");
						return 'color: #18B566;'
					}
				}
				return ""
			}
				
		},
		methods: {
			//评论详情页
			showcomment(id){
				console.log(id);
				uni.navigateTo({
					url:"commentitem?id="+id,
				});
				
				// uni.request({
				// 	url:this.discussionurl+"/cComment/comment?id="+id,
				// 	success: (res) => {
				// 		if(res.data.code==200){
				// 			this.comm=res.data;
				// 			console.log(res.data.result.comment);
				// 		}
				// 	}
				// })
				
			},
			preimg(it){
				console.log("预览")
				//预览图片方法
				uni.previewImage({
					//当前要预览的哪一张：用current来接收
					//urls：预览的图片数组地址
					current:it,
					urls:[this.imgs],
					loop:true, //循环滚动
					indicator:"number" //预览开启下标
				})
			},
			//分享微信
			weixinshare(){
				uni.share({
					 provider: "weixin",
					    scene: "WXSceneSession",
					    type: 0,
					    href: "http://192.168.10.86:8080/#/" ,
					    title: "uni-app分享",
					    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					    imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					    success: function (res) {
							uni.request({
								url:this.baseurl+"cDiscussion/addshare?id="+this.choseId,
								success: (res) => {
									console.log(res);
								}
								
							});
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
				});
				
				 
			},
			//分享链接
			linkshare(){
				uni.setClipboardData({
					data: this.baseurl+ "#/pages/comm/dessionitem?id="+this.choseId,
					success: (res) => {
						uni.request({
							url:this.baseurl+"cDiscussion/addshare?id="+this.choseId,
							success: (res) => {
								console.log(res);
							}
							
						});
						console.log(res)
						this.showf = false;
					}
				})
				uni.request({
					url:this.baseurl+"cDiscussion/addshare?id="+this.choseId,
					success: (res) => {
						console.log(res);
					}
					
				})
			},
			
			//分享也是弹窗
			showshare(id) {
				console.log(id);
				// this.discussionurl=window.location.host;
				// console.log(this.discussionurl)
				this.choseId=id;
				this.showf = true;
			},
			// 回复帖子
			replydis(){
				if(this.replytext==""){
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'error'
					})
					return ;
				}
				uni.request({
					url: this.baseurl+ "cComment/addComment",
					data:{
						discusion:this.disId,
						createdBy:this.$store.state.userInfo.name,
						img:this.$store.state.userInfo.headImg,
						status:1,
						likes:0,
						commentCount:0,
						floor:this.disscu.commentList.length+1,
						content:this.replytext
					},
					method:"POST",
					success: (res) => {
						this.getcomment(this.disId);
						if(res.data.code==200){
							this.$refs.uToast.show({
								title: '回复成功',
								type: 'success'
							})
							return
						}else{
							this.$refs.uToast.show({
								title: '回复失败，请稍后再试',
								type: 'error'
							})
						}
						
					}
				})


			},
			// 通过帖子id获取评论
			getcomment(id){
				uni.request({
					url: this.baseurl+ "cComment/selectCommentByDiscussion?dId=" + id,
					success: (res) => {
						if(res.data.code==200){
							this.disscu = res.data.result.discussion;
							this.imgs=this.baseurl+"cDiscussion/getimg?img="+this.disscu.img
							console.log(this.disscu);
						}
					}
				});
			},
			userlikes(){
				console.log("开始获取点赞");
					uni.request({
						url: this.baseurl+ "cUserlikes/selectAllUserlike?userid="+this.$store.state.userInfo.id,
						data: {
							community: this.$store.state.userInfo.community
						},
						success: res => {
							this.ulike=res.data;
						}
					});
			},
			showToast(id) {
				for (let i = 0; i < this.ulike.length; i++) {
					if(id==this.ulike[i].discussionId){
						uni.request({
							url: this.baseurl+ "cUserlikes/userlike",
							data:{
								userId:this.$store.state.userInfo.id,
								discussionId:id,
								commentId:0
							},
							method:"DELETE",
							success: (res) => {
								console.log(res);
								this.userlikes();
								this.getcomment(this.disId);
							}
						})
						
						this.$refs.uToast.show({
							title: '取消赞成功',
							type: 'error'
						})
						return
					}
				}
				uni.request({
					url: this.baseurl+ "cUserlikes/userlike",
					data:{
						userId:this.$store.state.userInfo.id,
						discussionId:id,
						commentId:0
					},
					method:"GET",
					success: (res) => {
						console.log(res);
						this.userlikes();
						this.getcomment(this.disId);
					}
				})
				this.$refs.uToast.show({
					title: '点赞成功',
					type: 'success'
				})
				
				
			},
			commentlike(id) {
				for (let i = 0; i < this.ulike.length; i++) {
					if(id==this.ulike[i].commentId){
						uni.request({
							url: this.baseurl+ "cUserlikes/userlike",
							data:{
								userId:this.$store.state.userInfo.id,
								discussionId:0,
								commentId:id
							},
							method:"DELETE",
							success: (res) => {
								console.log(res);
								this.userlikes();
								this.getcomment(this.disId);
							}
						})
						
						this.$refs.uToast.show({
							title: '取消赞成功',
							type: 'error'
						})
						return
					}
				}
				uni.request({
					url: this.baseurl+ "cUserlikes/userlike",
					data:{
						userId:this.$store.state.userInfo.id,
						discussionId:0,
						commentId:id
					},
					method:"GET",
					success: (res) => {
						console.log(res);
						this.userlikes();
						this.getcomment(this.disId);
					}
				})
				this.$refs.uToast.show({
					title: '点赞成功',
					type: 'success'
				})
				
				
			}
			

		},
		onLoad(option) {
			console.log(option);
			this.disId=option.id;
			this.userlikes();
			this.getcomment(option.id);

		},
		onPullDownRefresh: function() {
			console.log("触发了刷新");
			this.getcomment(this.disId);
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		
		},

		
	}
</script>

<style>
	text {
		word-wrap: break-word;
	}

	.sticky {
		width: 750rpx;
		height: 120rpx;
		background-color: #2979ff;
		color: #fff;
		padding: 24rpx;
	}
</style>
